<template>
  <div>
    <el-dialog
      :append-to-body="true"
      title="系统权限模板"
      v-model="detailDialog"
      custom-class="dialogBox"
      :close-on-click-modal="false"
      @close="cancel"
    >
      <el-form
        :model="formData"
        ref="sysPermissionTemplateForm"
        :rules="rules"
        label-width="100px"
        class="paddingBox formBox flex_wrap_start_start"
      >
        <el-form-item :label="$t('name')" prop="name">
          <el-input
            v-model="formData.name"
            maxlength="50"
            @input="(e) => (formData.name = validSe(e))"
          />
        </el-form-item>
        <el-form-item :label="$t('code')" prop="code">
          <el-input
            v-model="formData.code"
            maxlength="50"
            :disabled="formData.id"
            @input="(e) => (formData.code = validSe(e))"
          />
        </el-form-item>
        <el-form-item :label="$t('类型')" prop="type">
          <SelectModel
            v-model.trim="formData.type"
            :disabled="formData.id"
            typeCode="sys_permission_template"
          />
        </el-form-item>
        <el-form-item :label="$t('sort')" prop="sort">
          <el-input-number
            controls-position="right"
            v-model="formData.sort"
            :min="1"
            :max="99"
          />
        </el-form-item>
      </el-form>
      <template #footer class="dialog-footer">
        <el-button @click="cancel">{{ $t('btn_cancel') }}</el-button>
        <el-button
          type="primary"
          @click="updateSysPermissionTemplate('sysPermissionTemplateForm')"
          >{{ $t('btn_confirm') }}</el-button
        >
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="modify">
import { modifySysPermissionTemplate } from '@/api/base.js'
const { proxy } = getCurrentInstance()
const emits = defineEmits()
const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  tableRow: {
    type: Object,
    default: () => {
      return {}
    },
  },
})
const formData = ref({})

const rules = reactive({
  name: [
    { required: true, message: '请输入模板名称', trigger: 'blur' },
    { required: true, message: '请输入模板名称', trigger: 'blur' },
  ],
  code: [
    { required: true, message: '请输入模板编码', trigger: 'blur' },
    { validator: proxy.$validate.validatEn, trigger: 'blur' },
  ],
  type: [{ required: true, message: '请选择类型', trigger: 'change' }],
})
const detailDialog = computed({
  get() {
    return props.visible
  },
  set(val) {
    emits('update:visible', val)
  },
})

function updateSysPermissionTemplate(formName) {
  const method = props.tableRow.id ? 'put' : 'post'
  proxy.$refs[formName].validate((valid) => {
    if (valid) {
      modifySysPermissionTemplate(formData.value, method).then((resp) => {
        if (resp.success) {
          detailDialog.value = false
          emits('callback', true)
        }
      })
    }
  })
}
function cancel() {
  detailDialog.value = false
  formData.value = {}
  emits('callback', false)
}
onMounted(() => {
  if (props.tableRow.id) {
    formData.value = { ...props.tableRow }
  }
})
</script>

<style scoped></style>
